// cover some element-ui styles
.container-fluid {
  -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1), -1px 0 2px rgba(0, 0, 0, 0.05);
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1), -1px 0 2px rgba(0, 0, 0, 0.05);
  padding: 30px;
  background: #FFFFFF;
}

.bold{
  font-weight: bold !important;
}
.mail_icon{
  background: url(../assets/images/mail_icon.png) no-repeat;
  padding-left: 35px;
  background-size: 42px;
  height: 50px;
  background-position: -5px;
  text-align: left;}
.mail_icon.read{
  background: url(../assets/images/mail_icon_read.png) no-repeat;
  background-size: 42px;
  background-position: -5px;
}
.filter-container{
  .el-button{
    margin-bottom: 10px;
  }
  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }
}
.text-green {
  color: $bg;
}

.btn-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}

.el-breadcrumb__inner.is-link:hover, .el-breadcrumb__inner a:hover {
  color: $bg;
  cursor: pointer;
}

.has-shadow {
  -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1), -1px 0 2px rgba(0, 0, 0, 0.05);
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1), -1px 0 2px rgba(0, 0, 0, 0.05);
}

.el-button--success {
  min-width: 120px;
  color: #FFF;
  background-color: $bg;
  border-color: $bg;
  box-shadow: 0 4px 6px 0 rgba(0,70,140,0.20);
}
.el-message--success {
  background-color: rgb(237, 251, 244);
  border-color: rgba(78, 217, 143, 0.3);

  .el-message__icon{
    color: #4ed98f !important;
  }
  .el-message__content{
    color: #4ed98f !important;
  }
}

.el-button--success:focus, .el-button--success:hover,.el-card__header {
  background: $bg;
  border-color: $bg;
  color: #FFF;
}

.el-breadcrumb__inner,
.el-breadcrumb__inner a {
  font-weight: 400 !important;
}

.el-upload {
  text-align: left;
  input[type="file"] {
    display: none !important;
  }
}

.el-upload__input {
  display: none;
}

.el-upload__tip{
  font-size: 15px;
  color: #ACB8C8;
  margin-left: 5px;
}

// to fixed https://github.com/ElemeFE/element/issues/2461
.el-dialog {
  transform: none;
  left: 0;
  position: relative;
  margin: 0 auto;
}

// refine element ui upload
.upload-container {
  .el-upload {
    width: 100%;

    .el-upload-dragger {
      width: 100%;
      height: 200px;
    }
  }
}

// dropdown
.el-dropdown-menu {
  a {
    display: block
  }
}

.el-table__header {
  background-image: linear-gradient(90deg, $bg 0%, $bg 100%);
  border-radius: 4px 4px 0px 0px;
  color: #FFFFFF;

  tr {
    color: #FFFFFF;
  }
}

.thNowrap{
  .el-table {
    th>.cell{
      overflow: hidden;
      white-space: nowrap;

    }
  }
}

.el-table{
  .cell{
    word-break: break-word;
  }
  a, a:focus, a:hover{color:$bg !important;}

  .caret-wrapper{
    width:10px;
    height: 23px;
  }
  .sort-caret.ascending{
    border-bottom-color: rgba(255, 255, 255, 0.3);
    top: 0;
  }
  .sort-caret.descending{
    border-top-color: rgba(255, 255, 255, 0.3);
    bottom: 0;
  }
  .descending .sort-caret.descending{
    border-top-color: #ffffff;
  }
  .ascending .sort-caret.ascending {
    border-bottom-color: #ffffff;
  }
}
.el-table thead th, .el-table thead tr {
  background-color: rgba(0, 0, 0, 0)
}

.el-table--striped .el-table__body tr.el-table__row--striped.current-row td, .el-table__body tr.current-row > td, .el-table__body tr.hover-row.current-row > td, .el-table__body tr.hover-row.el-table__row--striped.current-row > td, .el-table__body tr.hover-row.el-table__row--striped > td, .el-table__body tr.hover-row > td {
  background-color: #f3f5f7;
}
.el-input.is-active .el-input__inner, .el-input__inner:focus {
  border-color:#00468c;
  outline: 0;
}
.el-select .el-input.is-focus .el-input__inner {
  border-color: $bg;
}
.el-select .el-input__inner:focus{
  border-color: $bg;
}

.el-tabs {
  .el-tabs__item.is-active, .el-tabs__item:hover {
    color: $bg;
  }

  .el-tabs__active-bar {
    background-color: $bg;
  }

  // .el-tabs__nav-wrap::after{background-color: rgba(0,0,0,0);}
}
.el-select-dropdown__item.selected {
  color: $bg;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected{
  color: $bg;
}

.home-full {
  .el-tabs__content {
    -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1), -1px 0 2px rgba(0, 0, 0, 0.05);
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1), -1px 0 2px rgba(0, 0, 0, 0.05);
    padding: 30px;
    background: #FFFFFF;
  }
}


.home-profile {
  .ul {
    margin-bottom: 14px;

    span {
      color: #ACB8C8;
      margin-right: 15px;
    }

    .hide {
      opacity: 0;
    }
    .remarks{
      word-wrap: break-word;
      margin-top: 5px;
      max-height: 60px;
      overflow: hidden;
      overflow-y: auto;
      line-height: 20px;
    }
  }

  .ul:last-child {
    margin-bottom: 0;
  }
  .el-input{
    margin-bottom: 0px !important;
    font-size: 16px;
  }
  .filter-container .el-input{
    margin-bottom: 10px !important;
  }
  .read-only{
    background: rgba(243, 245, 247, 0.2) !important;;
  }
  .ul-input{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    margin-bottom: 8px;
    label {
      color: #ACB8C8;
      text-align: right;
      font-weight: 500;
      flex: 1;
      margin-right: 5px;
    }

    input ,textarea{
      width: 100%;
      background: #f3f5f7;
      border: 0;
      padding: 5px;
      flex: 4;
      border-radius: 0;
      line-height: 20px;
      height: auto;
      color: #000000;
    }

    input:focus {
      outline: none;
    }

    .hide {
      opacity: 0;
    }

    .el-select {
      flex: 4;
      .el-input__inner {
        height: 30px;
      }
      .el-input__icon {
        line-height: 28px;
      }
      .el-input {
        font-size: 16px;
      }
      input{color: #000000}
    }

    .el-date-editor {
      position: relative;
      font-size: 16px;
      width: 100%;
      flex: 4;
      .el-input__prefix, .el-input__icon {
        display: none !important;
      }

      .el-input__inner {
        color: #000000;
        height: auto
      }

      input{

      }
    }
    .el-date-editor::after{
      display: none;
      width: 20px;
      height: 20px;
      content: '';
      background-image: url('../assets/images/date-picker.svg');
      background-repeat: no-repeat;
      background-size: 20px;
      background-position: right;
      position: absolute;
      right: 5px;
      top: 50%;
      margin-top: -10px;
    }

    .el-form-item{
      margin-bottom: 0px;
      .el-input{

      }
      .el-form-item__error{
        top: inherit;
        left: 0;
        bottom: -7px;
      }
    }

  }

  .ul-input:last-child {
    margin-bottom: 0;
  }

  .el-row {
    border-top: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
    border: 1px solid #e1e1e1;
  }

  .el-col {
    // border-left: 1px solid #e1e1e1;
    padding: 20px;
    border-right: 0;
    overflow: hidden;
    overflow-x: auto;
    white-space: nowrap;
    height: 100%;
  }

  .black {
    background: #f4f6f8;
  }

  // .el-col:last-child{border-right: 1px solid #e1e1e1;}
  .el-radio {
    text-align: left;

    .el-radio__input.is-checked + .el-radio__label {
      color: $bg;
    }

    .el-radio__input.is-checked .el-radio__inner {
      border-color: $bg;
      background: $bg;
    }
  }

  h2 {
    color: #586982;
  }

  .el-form {
    .el-row {
      margin-bottom: 1.66em;
    }

    .el-form-item__content {
      text-align: center;
    }
  }
  .home-profile-addEdit{
    .el-form-item__content {
      text-align: left;
    }
  }
  color: #586982;

  .btn-icon-del {
    position: absolute;
    right:-5px;
    width: 24px;
    height: 24px;
    top: -5px;
    cursor: pointer;
  }

}

.el-form-title {
  font-size: 20px;
  color: #586982;
}
.cur:before {
  content: "*";
  color: #ff4949;
  margin-right: 4px;
}

.add-page {

  .ul-textarea {
    align-items: baseline !important;
  }

  .hide {
    opacity: 0;
  }
  .el-autocomplete{
    flex: 4;
  }
  .ul-input.ul-bold{
    label:first-child {
      font-weight: bold !important;
    }
    .el-checkbox-group label{
      font-weight: 500 !important;
    }
  }
  .ul-input {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;

    label {
      color: #ACB8C8;
      text-align: right;
      font-weight: 500;
      flex: 1;
      margin-right: 5px;
    }



    input {
      width: 100%;
      background: #f3f5f7;
      border: 0;
      padding: 10px 8px;
      flex: 4;
      border-radius: 0;
      line-height: 20px;
      color: #586982 !important;
    }

    textarea {
      width: 100%;
      background: #f3f5f7;
      border: 0;
      padding: 10px;
      flex: 4;
      border-radius: 0;
      min-height: 108px;
      color: #586982;
    }

    input:focus, textarea:focus {
      outline: none;
    }

    input:read-only, textarea:read-only
    {
      background-color: rgba(243,245,247,0.3);
    }
    .el-select {
      flex: 4;
      .el-input__inner {
        height: 40px;
      }

      .el-input__icon {
        line-height: 40px;
      }
      input:read-only
      {
        background-color: rgba(243,245,247,1);
      }
      input:disabled
      {
        background-color: rgba(243,245,247,0.3);
      }
    }

    .el-date-editor {
      font-size: 16px;
      width: 100%;
      flex: 4;
      .el-input__prefix, .el-input__icon {
        display: none !important;
      }

      .el-input__inner {
        color: #000000;
        height: auto
      }
    }

    .el-radio {
      text-align: left;

      .el-radio__input.is-checked + .el-radio__label {
        color: $bg;
      }

      .el-radio__input.is-checked .el-radio__inner {
        border-color: $bg;
        background: $bg;
      }

      .el-radio__inner:hover {
        border-color: $bg;
      }
    }

    .label-sm {
      width: 80px;
      flex: inherit;
    }

    .label-md {
      width: 130px;
      flex: inherit;
    }

    .label-lg {
      width: 150px;
      flex: inherit;
    }

    .label-xl {
      width: 180px;
      flex: inherit;
    }

    .el-checkbox {
      margin-right: 20px;

      .el-checkbox__input.is-checked + .el-checkbox__label {
        color: $bg;
      }

      .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: $bg;
        border-color: $bg;
      }

      .el-checkbox__inner:hover, .el-checkbox__inner:focus{
        border-color: $bg;
      }

      .el-checkbox__label {
        font-size: 16px;
      }
    }

    .is-disabled{
      font-size: 16px;
      .el-input__icon{
        display: none;
      }
    }

    //.el-form-item__content{
    //  display: flex;
    //}
    //.el-form-item__error{
    //  text-align: right;
    //  left: initial;
    //  right: 0;
    //  padding-top: 0;
    //}
  }

  .el-row .el-col:last-child .ul-input:last-child {
    margin-bottom: 0;
  }


  h3 {
    font-size: 20px;
    color: #586982;
  }
  .upload-demo{
    .el-upload{
      float: left;
    }
  }
  .el-upload-list {
    display: inline-block;
    padding: 7px 10px;

    .el-upload-list__item {
      width: 200px;
      display: inline-block;
      margin-top: 0;
    }
    .el-upload-list__item.is-success .el-upload-list__item-name:focus, .el-upload-list__item.is-success .el-upload-list__item-name:hover{
      color: #00468c;
    }

    .focusing{
      .el-icon-close-tip{display: none !important;}
      .el-icon-close{/*display: inline-block !important;*/ opacity: 1;}
      //.el-icon-close {
      //  display: none !important;
      //}
    }
  }

  .btn-icon-del {
    position: absolute;
    right: -10px;
    width: 24px;
    height: 24px;
    top: -5px;
    cursor: pointer;
  }

  .solid-row {
    padding: 20px 10px;
    border: 1px solid rgba(151, 151, 151, 0.3);
    margin-bottom: 20px;
  }

  color: #586982;
}
.disabled-input{
  input {
    ime-mode: disabled
  }
  textarea{
    ime-mode: disabled
  }
  .el-upload-list{
    .el-upload-list__item-status-label{display: none !important;}
    .el-icon-close{display: none !important;}
    .focusing{
      .el-icon-close{display: none !important;}
    }
  }
  .el-upload-list__item:hover .el-icon-close {
    display: none !important;
  }



}
.el-year-table td .cell:hover, .el-year-table td.current:not(.disabled) .cell {
  color: $bg;
}
.el-date-picker__header-label.active, .el-date-picker__header-label:hover {
  color: $bg;
}
.el-month-table td .cell:hover {
  color: $bg;
}
.el-month-table td.current:not(.disabled) .cell {
  color: $bg;
}
.el-date-table td.current:not(.disabled) span {
  background-image: linear-gradient(180deg, $bg 0%, $bg 100%);
}

.el-date-table td.today span {
  color: $bg;
  font-weight: 700;
}

.el-date-table td.available:hover {
  color: $bg;
}

.el-form-item {
  .el-form-item__content {
    margin-left: 0 !important;
  }
}

.el-select-dropdown__item.selected {
  color: $bg;
}

.el-message-box {
  .el-button--primary {
    background-color: $bg;
    border-color: $bg;
    -webkit-box-shadow: 0 4px 6px 0 rgba(78, 217, 143, 0.2);
    box-shadow: 0 4px 6px 0 rgba(78, 217, 143, 0.2);
  }
  .el-button:first-child:hover{
    color: $bg;
    border-color: rgba(78, 217, 143, 0.1);
    background-color: rgba(78, 217, 143, 0.1);
  }
}

.el-button--default:focus, .el-button--default:hover {
  //color: $bg;
  //border-color: rgba(78, 217, 143, 0.1);
  //background-color: rgba(78, 217, 143, 0.1);
}

.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover {
  //background-color: rgba(75, 217, 149, 0.2);
  color: #00468c;
}

.el-pagination {
  text-align: right;
  padding: 32px 16px;
  .el-pager li{
    color: #858585;
  }
  .el-pager li.active, .el-pager li:hover {
    color: $bg;
  }
  button:hover{
    color: $bg;
  }
  .el-pagination__sizes .el-input .el-input__inner:hover {
    border-color: $bg;
  }
}

.el-loading-spinner {
  .path {
    stroke: #00468c;
  }

  .el-loading-text {
    color: #00468c;
  }
  i{
    color: #00468c;
  }
}

.el-upload-list__item .el-icon-upload-success {
  color: $bg;
}



@media (max-width:475px) {

  .container-fluid{
    padding: 15px;
  }
  .home-full {
    .el-tabs__content {
      padding: 10px;
    }
  }
  .home-profile{
    .el-col{padding: 0 10px}
    .ul, .ul:last-child {
      padding: 8px 0;
      margin-bottom: 0;
    }
    .el-row{padding:10px 0;}
    .ul-input {
      display: block;
      input{
        display: block;
        width: 100%;
      }
      label{
        display: block;
        width: 100%;
        text-align: left;
        margin: 5px 0;
      }
      .el-select{
        width: auto !important;
        margin: 5px 0;
      }
      .el-autocomplete{
        width: 100%;
      }
      .el-button{
        display: block;
        margin: 5px 0;
      }

    }
  }
  .el-table th>.cell {
    overflow: hidden;
    white-space: nowrap;
  }
  .el-table tbody td>.cell{
    overflow: hidden;
    white-space: nowrap;
  }
  .add-page{
    .ul-input{
      display: block;
      width: 100%;
      .el-select{
        width: 100%;
      }
      .el-autocomplete{
        width: 100%;
      }
      .el-autocomplete input{ margin-bottom: 10px;}
    }

    .ul-input label{
      text-align: left;
      display: block;
      margin-bottom: 10px;
    }
  }
  .filter-container{
    .filter-item.el-input{
      min-width: 100%;
    }
  }
}
@media only screen and (min-width: 1200px) {
  .el-row.el-h125 {
    height: 125px;
  }
  .el-row.el-h155 {
    height: 155px;
  }
  .el-row.el-h220 {
    height: 220px;
  }

  .el-row.el-h250 {
    height: 250px;
  }
  .el-row.el-h282{
    height: 282px;
  }
  .el-row .el-col:first-child{
    border-left: 0px solid #EFEFEF !important;
  }
  .el-row.el-h155 .el-col, .el-row.el-h220 .el-col, .el-row.el-h125 .el-col, .el-row.el-h250 .el-col{
    border-left: 1px solid #EFEFEF;
  }
}
